<script setup>
import {ref} from "vue";

  const tableData = [
    {
      name: '版本号',
      info: "v1.0.0"
    },
    {
      name: "后端框架",
      info: "vue3+springboot"
    },
    {
      name: "前端框架",
      info: "微信小程序"
    },
    {
      name: "状态信息",
      info: "测试"
    }
  ]

  const activities = [
    {
      content: '微信小程序测试',
      timestamp: '2025-05-2',
    },
    {
      content: '后台测试',
      timestamp: '2025-04-29',
    },
    {
      content: '开始研发',
      timestamp: '2025-04-7',
    },
    {
      content: '技术选择',
      timestamp: '2025-04-5',
    },
    {
      content: '需求分析',
      timestamp: '2025-04-1',
    },
  ]

  const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)

  const percentage1 = ref(40)
  const percentage2 = ref(60)

  const colors = [
    { color: '#6aff6b', percentage: 20 },
    { color: '#2ed5cf', percentage: 40 },
    { color: '#309ee0', percentage: 60 },
    { color: '#e39535', percentage: 80 },
    { color: '#ff0000', percentage: 100 },
  ]

  import { onMounted, onUnmounted } from 'vue';
  import { initChart1, initChart2 } from '@/utils/chartOne.js'; // 引入 chart.js 中的函数

  const chart1Ref = ref(null);
  const chart2Ref = ref(null);

  let chart1Instance = null;
  let chart2Instance = null;

  // 在组件挂载时初始化图表
  onMounted(() => {
    if (chart1Ref.value) {
      chart1Instance = initChart1(chart1Ref.value);
    }
    if (chart2Ref.value) {
      chart2Instance = initChart2(chart2Ref.value);
    }
  });

  // 在组件卸载时销毁图表
  onUnmounted(() => {
    if (chart1Instance) {
      chart1Instance.dispose();
    }
    if (chart2Instance) {
      chart2Instance.dispose();
    }
  });
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="6" >
      <el-card class="no-shadow">
        <template #header>
          <span>POI数量</span>
          <span class="textStyle-1" type="text">总</span>
        </template>
        <div style="font-size: 32px">8207</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="no-shadow">
        <template #header>
          <span>标签总数</span>
          <span class="textStyle-1" type="text">总</span>
        </template>
        <div style="font-size: 32px">5</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="no-shadow">
        <template #header>
          <span>总用户数</span>
          <span class="textStyle-1" type="text">总</span>
        </template>
        <div style="font-size: 32px">11</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="no-shadow">
        <template #header>
          <span>新增用户</span>
          <span class="textStyle-1" type="text">月</span>
        </template>
        <div style="font-size: 32px">0</div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-top: 10px">
    <el-col :span="4">
      <el-card class="div-test div-center no-shadow">
        <router-link to="/user/manage">
          <el-icon size="35" color="#84d2ff"><UserFilled /></el-icon>
          <div style="font-size: 14px" >用户</div>
        </router-link>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card class="div-test div-center no-shadow">
        <router-link to="/other/analysis">
          <el-icon size="35" color="#bfdcf1"><TrendCharts /></el-icon>
          <div style="font-size: 14px">分析</div>
        </router-link>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card class="div-test div-center no-shadow">
        <el-icon size="35" color="#ffec84"><Location /></el-icon>
        <div style="font-size: 14px">地点</div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card class="div-test div-center no-shadow">
        <el-icon size="35" color="#15dc94"><Edit /></el-icon>
        <div style="font-size: 14px">审批</div>
      </el-card>
    </el-col>
    <el-col :span="4">
    <el-card class="div-test div-center no-shadow">
      <router-link to="/article/category">
        <el-icon size="35" color="#dc1515"><Discount /></el-icon>
        <div style="font-size: 14px">标签</div>
      </router-link>
    </el-card>
    </el-col>
    <el-col :span="4">
      <el-card class="div-test div-center no-shadow">
        <el-icon size="35" color="#000000"><Operation /></el-icon>
        <div style="font-size: 14px">配置</div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-top: 10px">
    <el-col :span="8">
      <el-card class="no-shadow" style="height: 300px">
        <template #header>
          <span style="text-align: left">进度信息</span>
        </template>
        <el-scrollbar height="200px">
          <el-timeline style="max-width: 100%; padding-left:10px">
            <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="no-shadow" style="height: 300px">
        <template #header>
          <span style="text-align: left">资源信息</span>
        </template>
        <div style="border: 2px solid #e3e1e1; padding: 5px; border-radius: 5px">
          <el-row>
            <el-col :span="4">
              <el-tag  type="primary">存储占用</el-tag>
            </el-col>
            <el-col style="margin-top: 3px; margin-left: 20px" :span="16">
              <el-progress :text-inside="true" :stroke-width="17" :percentage="50" :color="colors"/>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="4">
              <el-tag  type="primary">负载情况</el-tag>
            </el-col>
            <el-col class="demo-progress" :span="16">
              <el-progress :text-inside="true" :stroke-width="17" :percentage="40" :color="colors" />
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="12" class="demo-progress-2">
              <el-progress type="dashboard" :percentage="percentage1" :color="colors">
                <template #default="{ percentage1 }">
<!--                  <span class="percentage-value">{{ percentage1 }}ms</span>-->
                  <el-tag style="margin-top: 10px" type="sucess">网络延迟</el-tag>
                </template>
              </el-progress>
            </el-col>
            <el-col :span="12" class="demo-progress-2">
              <el-progress type="dashboard" :percentage="percentage2" :color="colors">
                <template #default="{ percentage2 }">
<!--                  <span class="percentage-value">{{ percentage2 }}ms</span>-->
                  <el-tag style="margin-top: 10px" type="sucess">传输速度</el-tag>
                </template>
              </el-progress>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="no-shadow" style="height: 300px">
        <template #header>
          <span style="text-align: left">小程序版本信息</span>
        </template>
        <el-table :data="tableData" border>
          <el-table-column label="项目" prop="name"></el-table-column>
          <el-table-column label="信息" prop="info"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-top: 10px">
    <el-col :span="16">
      <el-card class="no-shadow" style="height: 400px">
        <template #header>
          <span style="text-align: left">上周用户新增</span>
          <span class="textStyle-1" type="text">周</span>
        </template>
        <div style="width: 100%;height: 300px" ref="chart1Ref"></div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="no-shadow" style="height: 400px">
        <template #header>
          <span style="text-align: left">本周热门地点</span>
          <span class="textStyle-1" type="text">周</span>
        </template>
        <div style="width: 100%;height: 300px" ref="chart2Ref"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.no-shadow {
  box-shadow: none !important; /* 去除阴影 */
}
.textStyle-1{
  float: right;
  padding: 0 3px;
  color: #52c41a;
  border: 1px solid #b7eb8f;
  background-color: #f6ffed;
  border-radius: 3px;
}
.div-test{
  background-color: #ffffff;
  height: 100px;
}
.icon-image {
  height: 50px;
  width: 50px;
}
.div-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.demo-progress{
  max-width: 600px;
  margin-top: 3px;
  margin-left: 20px
}
.demo-progress-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
a {
  text-decoration: none; /* 去掉下划线 */
}
/* 鼠标悬停状态 */
a:hover {
  color: #a2c8f6; /* 悬停时的颜色 */
}

</style>
